<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/echarts.min.js"></script>
		<style> html, body, #app { height: 100%; } </style>
	</head>
	<body>
		<div id="app" style="display: flex; flex-direction: column; width: 90%; margin:auto; height: calc(100% - 50px)">
				<h4 style="flex: none;display: flex; align-items: center; justify-content: space-between">
					年度月份中奖数饼状图
					<form style="display: flex; align-items: center; font-weight: normal;">
						<input type="radio" name="prize" checked>头等奖
						<input type="radio" name="prize">二等奖
						<select style="width: 100px;margin-left: 20px">
							<option>2012 年</option>
							<option>2013 年</option>
							<option>2014 年</option>
							<option>2015 年</option>
						</select>
					</form>
				</h4>
				<div id="container" style="flex:auto"></div>
		</div>
		<script type="text/javascript">
			var dom = document.getElementById('container');
			var myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			option = {
				title: {
					text: '年度月份中奖数饼状图',
					subtext: '2012年',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: '头等奖',
						type: 'pie',
						radius: '50%',
						data: [
							{ value: 1048, name: '1月' },
							{ value: 735, name: '2月' },
							{ value: 580, name: '3月' },
							{ value: 484, name: '4月' },
							{ value: 400, name: '5月' },
							{ value: 610, name: '6月' },
							{ value: 1048, name: '7月' },
							{ value: 735, name: '8月' },
							{ value: 580, name: '9月' },
							{ value: 484, name: '10月' },
							{ value: 344, name: '11月' },
							{ value: 370, name: '12月' },
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
			window.addEventListener('resize', myChart.resize);
		</script>
	</body>
</html>

<style>
	html,
	body,
	#app {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	#app {
		/* padding: 50px; */
		box-sizing: border-box;
	}
</style>
